<template>
  <div class="recommend">
    <p class="recommend__title">周末去哪儿</p>
    <ul class="recommend-item">
      <li class="border-bottom" v-for="item of weekend" :key="item.id">
        <div class="item__img"><img :src='item.imgUrl' alt=""></div>
        <div class="item__content">
          <p class="content__title">{{item.title}}</p>
          <p class="content__txt">{{item.desc}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'weekend',
  props: {
    weekend: Array
  }
}
</script>

<style lang="stylus" scoped>
  @import "~@/assets/css/varible.styl"
  .recommend
    .recommend__title
      padding: 16px 0 16px 20px;
      background: #eee;
    .recommend-item > li
      border-bottom: 1px solid #eee;/*no*/
      .item__img
        width: 100%;
        height: 60%;
        img
          height: 100%;
          width: 100%;
          margin-bottom: 10px;
      .item__content
        min-width: 0;
        padding: 20px;
        p
          txt-elipsis()
        .content__title
          margin-bottom: 10px;
          font-size: 32px;/*px*/
        .content__txt
          margin-bottom: 20px;
          color: #ccc;
</style>
